<template>
    <el-card class="box-card">
        <div class="card-desc-header">
            <span class="card-title">编辑角色</span>
        </div>
        <div class="card-view-body">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form ref="formRef" :rules="rules" :model="ruleForm" label-width="80px" size="small">
                        <el-form-item label="权限名" prop="name">
                            <el-input v-model="ruleForm.name" class="input-value"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <auth-button class="mx-24 my-3" @click="submitForm('ruleForm')" type="primary" size="small" text="提交" :route_name="'/sys/role/saveRole'"></auth-button>
                        </el-form-item>
                    </el-form>

                </el-col>
            </el-row>
        </div>
    </el-card>
</template>
<script>
import { toRefs, reactive } from 'vue'
import { useRouter, useRoute } from "vue-router"
import { useStore } from "vuex"
import { getRoleDetail,createRole,saveRole } from "~/api/role"
import { toast } from "~/composables/util"
import AuthButton from '../../components/AuthButton.vue'

export default {
  components: { AuthButton },
    setup() {
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const state = reactive({
            ruleForm: {
                name: "",
            },
            id: 0,
            rules: {
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                ]
            },

        });
        function submitForm() {
            if (state.id == 0) {
                createRole(state.ruleForm)
                    .then(res => {
                        if (res.code == 200) {
                            toast(res.msg)
                            router.go(-1)
                        } else {
                            toast(res.msg, 'error')
                        }
                    })
            } else {
                saveRole(state.ruleForm)
                    .then(res => {
                        if (res.code == 200) {
                            toast(res.msg)
                            router.go(-1)
                        } else {
                            toast(res.msg, 'error')
                        }
                    })
            }
        }
        const getDetail = (params) => {
            if (params == 0) {
                state.id = params
            } else {
                state.id = params
                getRoleDetail(parseInt(params))
                    .then(res => {
                        if (res.code == 200) {
                            state.ruleForm = res.data.Role_info
                        } else {
                            toast(res.msg, 'error')
                        }
                    })
            }
        };
        getDetail(route.query.id)
        return {
            ...toRefs(state),
            submitForm,
        }
    }
};




</script>
